<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>动态组件加载测试20200518</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <!--ie渲染引擎-->
    <!--忽略电话号码和email识别-->
    <meta name="format-detection" content="telephone=no" />
    <meta name="format-detection" content="email=no" />
    <!--当网站添加到主屏幕快速启动方式，将网站添加到主屏幕快速启动方式-->
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <!--隐藏ios上的浏览器地址栏-->
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <!-- UC默认竖屏 ，UC强制全屏 -->
    <meta name="full-screen" content="yes">
    <meta name="browsermode" content="application">
    <!-- QQ强制竖屏 QQ强制全屏 -->
    <meta name="x5-orientation" content="portrait">
    <meta name="x5-fullscreen" content="true">
    <meta name="x5-page-mode" content="app">
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui">
    <link rel="stylesheet" href="../../resources/assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="../../resources/assets/css/beyond.min.css" />
    <link rel="stylesheet" href="../../resources/assets/css/demo.min.css"  />
    <link rel="stylesheet" href="../../resources/assets/css/font-awesome.min.css" />
    <link rel="stylesheet" href="../../resources/app/css/app.css">
    <style type="text/css">
      button {
	    color: red;
      }
    
    </style>
    
  </head>
  <body>

<div id="app" class="container">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
    <div class="well with-header">
       <div class="header bordered-pink">动态组件路由测试</div>
       <!-- 使用 router-link 组件来导航.通过传入 'to' 属性指定链接. <router-link> 默认会被渲染成一个 '<a>' 标签  -->
				  <p>
				    <router-link to="/p1" class="btn btn-primary">跳转到p1</router-link>
				    <br/><br/>
				    <router-link to="/p2" class="btn btn-primary">跳转到p2</router-link>
				    <br/><br/>
				    <router-link to="/p3" class="btn btn-primary">跳转到p3</router-link>
				  </p>
				  <!--router-view:路由匹配到的组件内容将渲染在这里 -->
				  <router-view></router-view>
    </div><!-- well -->
</div>    
</div><!-- row -->
</div>
     
     
     <!--页面模板定义组件 -->
     <template id="p3">
		 <h1>p33333333333</h1>
     </template>
     
<script src ="../../resources/assets/js/jquery-2.0.3.min.js"></script>
<script src ="../../resources/assets/js/bootstrap.min.js"></script>
<script src ="../../resources/app/js/vue-online.js"></script>
<script src ="../../resources/app/js/vue-router.js"></script>
<script src ="./loader.js"></script>
<script type="text/javascript">



//1.定义组件
var comp_p1   = { template: '<div><h1>p11111111111</h1><button>外部button</button></div>' };
var comp_p2   = { template: '<h1>p22222222222</h1>' };
//页面模板定义组件
var comp_p3   = { template: '#p3' };
//2.定义路由映射表,每个路径应该映射一个组件
var routerTable = [
   , { path: '/p1', component: comp_p1 }
   //, { path: '/p2', component: comp_p2 }
   , { path: '/p2', component: AppContext.loadComponentAsyn("demo-comp-css.html") }
   , { path: '/p3', component: AppContext.loadComponentAsyn("demo-comp.html") }
];
//3. 创建 router 实例，然后传入routerTable 配置
var router = new VueRouter({routes:routerTable});
//4. 创建和挂载根实例.记得要通过 router 配置参数注入路由, 从而让整个应用都有路由功能
var app = new Vue({
  el: '#app'
    ,router
});
</script>
</body>
</html>
